<template>
	<view class="chat">
		<view class="person">
			<view class="tou">
				<image :src="list.avatar_url" mode="scaleToFill" style="width: 80rpx; height: 80rpx;"></image>
			</view>
			<view class="touright">
				<text>{{list.user_name}}</text>
				<text class="sex" v-if="list.user_sex == 1">男</text>
				<text class="sex" v-if="list.user_sex == 2">女</text>
				<text class="age">{{list.user_age}}岁</text>
			</view>
		</view>

		<scroll-view scroll-y="true" :scroll-into-view="scrollTop" class="scrollView">
			<view class="infos" v-for="(item,index) in infos" :key="index" :id="'msg-' + index">
				<view v-if="item.state == 0" class="leftInfos">
					<view class="leftInfosImg">
						<image :src="list.avatar_url" mode="scaleToFill" style="width: 90rpx; height: 90rpx;"></image>
					</view>
					<view class="leftTxt">
						<text>{{item.txt}}</text>
					</view>
				</view>
				<view v-if="item.state == 1" class="rightInfos">
					<view class="rightTxt">
						<text>{{item.txt}}</text>
					</view>
					<view class="rightInfosImg">
						<image :src="headPortrait" mode="scaleToFill" style="width: 90rpx; height: 90rpx;"></image>
					</view>
				</view>

			</view>
		</scroll-view>

		<view class="bottoms">
			<view class="shuru">
				<input type="text" v-model="txt" /> <text @click="send">发送</text>
			</view>
		</view>
	</view>
</template>

<script>
	import TIM from 'tim-wx-sdk';
	export default {
		onLoad(options) {
			this.openid = options.openid;
			// 获取自己的头像
			this.headPortrait = this.$store.state.userinfo.user_url;
		},
		onShow() {
			this.getDatums();
			this.getRecordInfo();
			this.getInfo();
		},
		data() {
			return {
				// 医生的openid
				openid: null,

				infos: [],

				txt: "",
				list: null,

				// Im的sdk号
				options: {
					SDKAppID: 1400388580
				},
				tim: null,

				// 自己的头像了吧
				headPortrait: null,

				// 滚动条的位置
				scrollTop: null,
			};
		},
		methods: {
			// 设置滚动到底部的位置了吧
			setScrollTop() {
				this.scrollTop = "msg-" + (this.infos.length - 1);
			},
			send() {
				let self = this;
				let userID = this.openid;
				let message = this.globalData.tim.createTextMessage({
					to: userID,
					conversationType: TIM.TYPES.CONV_C2C,
					payload: {
						text: self.txt
					}
				});

				this.globalData.tim.sendMessage(message).then(res => {
					let obj = {
						state: 1,
						txt: res.data.message.payload.text
					};
					self.infos.push(obj);
					self.txt = "";
					self.setScrollTop();
				}).catch(err => {
					console.error(err);
				});
			},

			async getDatums() {
				let res = await this.$myrequest({
					url: `Pagelist/editMessage?openid=${this.openid}`
				});
				this.list = res.data.data;
			},

			getRecordInfo() {
				let self = this;
				let conID1 = `C2C${this.openid}`;
				let promise1 = this.globalData.tim.getMessageList({
					conversationID: conID1,
					count: 15
				}).then(res => {
					self.infos = res.data.messageList.map((value, key, arr) => {
						if (value.from == self.openid) {
							return {
								state: 0,
								txt: value.payload.text,
							}
						} else {
							return {
								state: 1,
								txt: value.payload.text,
							}
						};
					});
					self.setScrollTop();
				}).catch(err => {
					console.error(err);
				});
			},

			getInfo() {
				let self = this;
				let onMessageReceived = (event) => {
					if (event.data[0].conversationID == `C2C${this.openid}`) {
						let obj = {
							state: 0,
							txt: event.data[0].payload.text
						};
						self.infos.push(obj);
						self.setScrollTop();
					};
				};
				this.globalData.tim.on(TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived);
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;
	}

	.chat {
		width: 100%;
		height: 100%;
		padding: 30rpx;
		background-color: #F5F5F5;
	}

	.person {
		display: flex;
		align-items: center;
		height: 110rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;

		.tou {
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;

			image {
				border-radius: 50%;
			}
		}
	}

	.gerenxinxi {
		display: flex;
		width: 100%;
	}

	.bottoms {
		padding: 10rpx 30rpx 0rpx 30rpx;
		width: 750rpx;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #FFFFFF;

		.shuru {
			@include chuizhilianduan;

			>input {
				width: 549rpx;
				height: 70rpx;
				background-color: #EDEEF0;
				border-radius: 35rpx;
				padding-left: 30rpx;
			}

			>text {
				display: inline-block;
				padding: 10rpx 20rpx;
				background-color: #3ACEB0;
				color: #FFFFFF;
				border-radius: 20rpx
			}
		}
	}

	.infos {
		margin: 10rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.leftInfos,
		.rightInfos {
			display: flex;
			width: 100%;
			align-items: center;

			>image {
				border-radius: 50%;
			}
		}
	}

	.leftInfosImg {
		margin-right: 20rpx;
	}

	.rightInfosImg {
		margin-left: 20rpx;
	}

	.leftInfos {
		justify-content: flex-start;
	}

	.rightInfos {
		justify-content: flex-end;
	}

	.leftTxt,
	.rightTxt {
		width: 60%;
		display: flex;
	}

	.leftTxt {
		>text {
			position: relative;

			&::after {
				display: block;
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				height: 140%;
				width: 140%;
				background-color: rgba(0, 0, 0, .04);
				border-radius: 0rpx 25rpx 25rpx 25rpx;
			}
		}
	}

	.rightTxt {
		justify-content: flex-end;

		>text {
			position: relative;

			&::after {
				display: block;
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				height: 140%;
				width: 140%;
				background-color: rgba(0, 0, 0, .04);
				border-radius: 25rpx 0rpx 25rpx 25rpx;
			}
		}
	}

	.scrollView {
		margin-top: 20rpx;
		height: calc(100% - 100rpx - 110rpx - 10rpx);
	}

	.touright {
		width: 100%;
		display: flex;
		align-items: center;

		>text {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: rgba(153, 153, 153, 1);

			&:first-of-type {
				color: rgba(0, 0, 0, 1);
			}
		}
	}

	.sex {
		margin-left: 20rpx;
		font-size: 26rpx;
		color: rgba(153, 153, 153, 1);
	}

	.age {
		margin-left: 20rpx;
		font-size: 26rpx;
		color: rgba(153, 153, 153, 1);
	}
</style>
